import React, {memo, useEffect, useRef, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";

import "./quantification.css";
import PlateTable from "../../../../../components/plateTable/PlateTable";
import Title from "../../../../../components/Title/Title";
import standardPic from "./images/standardIcon.png";
import resultPic from "./images/resultIcon.png";
import {
    calCqMean,
    calQuantityMean,
    deepClone,
    getAnalysisInfo,
    groupBySort,
    updateTargetsWithPlateTargets
} from "../../../../../common/utils";
import CutOff from "../../../../../components/cutOff/CutOff";
import {MENU_STYLE, WELLS_COLUMN, WELLS_ROW} from "../../../plate/config";
import {
    BASELINE_CORRECTION,
    BASELINE_SUBTRACTED_CURVE_FIT,
    DATA_ANALYSIS_METHOD,
    DATA_ANALYSIS_METHOD_1,
    DATA_ANALYSIS_METHOD_2,
    DATA_ANALYSIS_METHOD_3,
    HEAT_MAP_TYPE_CQ,
    HEAT_MAP_TYPE_QUANTITY,
    RAW_DATA,
    TABLE_TITLE_KEY
} from "./config";
import {EntityType, FluorescenceCanvas, FluorescenceEntity} from "../../../../../common/canvas";
import {
  saveAllThreshold,
  saveBaseLine,
  saveBaselineType,
  saveCqSingleThreshold,
  saveDataAnalysisMethod,
  saveGroupByLists,
  saveHeatMapInfo, saveIsTarget, saveSigLevel,
  saveTableSelectedLists,
  saveTargetSelectedArr
} from "./store/actionCreators";
import {saveAnalysisShowLineArr} from "../../../plate/store/actionCreators";
import {
    CQMAN,
    CUSTOM_THRESHOLD,
    EXTREMUM,
    REGRESSION,
    SINGLE_THRESHOLD,
    THRESHOLD,
    WELL_TYPE
} from "../../../store/constants";
import {saveData} from "../../../store/actionCreators";
import {Dropdown, Menu, message} from "antd";
import {AMPLIFICATION} from "../../../protocol/config";
import request from "../../../../../services/request";
import {useDebounce} from "../../../../../common/myHooks";
import {saveExportObj, saveExportObjCn} from "../../../export/store/actionCreators";
import HeatMapTable from "../../../../../components/heatMapTable/HeatMapTable";
import ResultCallTable from "../../../../../components/resultCallTable/ResultCallTable";

export default memo(function Quantification() {
    const dispatch = useDispatch();
    const {
        data,
        cqSingleThreshold,
        baselineType,
        heatMapInfo,
        pcrAllCycle,
        groupByLists,
        baseLine,
        exportObj,
        exportObjCn,
        allThreshold,
        tableSelectedLists,
        analysisShowLineArr,
        targetSelectedArr,
        dataAnalysisMethod,
        quantificationCutOff,
        tableSelectedListsShort,
        isCN,
        navigationIndex,
        sigLevelRedux,
        isTarget
    } = useSelector(
        state => ({
            data: state.dataReducer.data,
            analysisShowLineArr: state.plateReducer.analysisShowLineArr,  //  包含可以画线的well(同时有target和sampleName)
            targetSelectedArr: state.quantificationReducer.targetSelectedArr, //  保存Target Setting中Opt被选中的target的name
            dataAnalysisMethod: state.quantificationReducer.dataAnalysisMethod,  //  分析的方法(3种)
            tableSelectedLists: state.quantificationReducer.tableSelectedLists,//  tableSelected列表
            allThreshold: state.quantificationReducer.allThreshold,  //  所有target的threshold
            exportObj: state.exportReducer.exportObj,
            exportObjCn: state.exportReducer.exportObjCn,
            pcrAllCycle: state.protocolReducer.pcrAllCycle,
            groupByLists: state.quantificationReducer.groupByLists,
            baseLine: state.quantificationReducer.baseLine,
            heatMapInfo: state.quantificationReducer.heatMapInfo,
            baselineType: state.quantificationReducer.baselineType,
            cqSingleThreshold: state.quantificationReducer.cqSingleThreshold,
            quantificationCutOff: state.quantificationReducer.quantificationCutOff,
            isCN: state.languageReducer.isCN,
            navigationIndex: state.navigationReducer.navigationIndex,
            sigLevelRedux: state.quantificationReducer.sigLevel,
            isTarget: state.quantificationReducer.isTarget,
        }));

    const [target, setTarget] = useState([]);  //  target条目
    const [isCq, setIsCq] = useState(true); //  切换Cq/Log
    const [isTarget_, setIsTarget] = useState(isTarget); //  切换target/sample
    const [isStandardCurve, setIsStandardCurve] = useState(true); //  切换Standard Curve/Result Call
    const [showMethodSetting, setShowMethodSetting] = useState(false); //  显示Method Setting
    const [showGroupBy, setShowGroupBy] = useState(false); //  显示GroupBy
    const [showTableSelect, setShowTableSelect] = useState(false); //  显示TableSelect
    const [showCutOffTable, setShowCutOffTable] = useState(false); //  显示CutOffTable
    const [showMoreData, setShowMoreData] = useState(false); //  显示More Data
    const [startX, setStartX] = useState(0);  //  鼠标按下起始位置横坐标
    const [startY, setStartY] = useState(0);  //  鼠标按下起始位置纵坐标
    const [leftDown, setLeftDown] = useState(false);  //  鼠标左键是否按下
    const [lineId, setLineId] = useState(-1);  //  选中的线的ID,选中表格条目也会改变此ID
    const [wellId, setWellId] = useState([]);  //  选中well的target
    const [heatMapWellId, setHeatMapWellId] = useState([]);  //  选中heatMapWell的孔
    const [tableTitle, setTableTitle] = useState(() => tableSelectedLists.filter(item => item.selected)); //  右下角表格标题
    const [autoAxes, setAutoAxes] = useState(true);
    const [minY, setMinY] = useState(0);
    const [maxY, setMaxY] = useState(Infinity);
    const [showLargeQuantificationPic, setShowLargeQuantificationPic] = useState(false);
    const messageTable = useRef();
    const moreDataMessageTable = useRef();
    const [moreDataTableTitle, setMoreDataTableTitle] = useState([]);
    const [moreTableTargetNameList, setMoreTableTargetNameList] = useState([]);
    const [moreTableTargetName, setMoreTableTargetName] = useState("All");
    const [heatMapTarget, setHeatMapTarget] = useState([]);
    const [cutOffTarget, setCutOffTarget] = useState("");
    const [cutOffSetting, setCutOffSetting] = useState(quantificationCutOff);
    const [singleThreshold, setSingleThreshold] = useState(data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD);
    const [isMessageTableEnter, setIsMessageTableEnter] = useState(false);
    // const [baseLineAuto, setBaseLineAuto] = useState(true);
    const [sigLevel, setSigLevel] = useState(sigLevelRedux);
    const quantificationBox = useRef();
    const quantificationStyle = {
        paddingLeft: 60,
        paddingTop: 10,
        paddingBottom: 50,
        paddingRight: 10,
        dataPaddingLeft: 10,
        dataPaddingBottom: 10,
        dataPaddingTop: 10,
        dataPaddingRight: 10,
        axisTitleLeft: "RFU(10^3)",
        axisTitleLeftPadding: 30,
        axisTitleBottom: isCN ? "循环数" : "Cycles",
        axisTitleBottomPadding: 20,
        // drawReferenceLine:false,
        xAxisNumberLength:Math.round(pcrAllCycle/2),
        autoAxisX:false,
        maxX: pcrAllCycle,
        xDataStart: 1
    };
    const standardStyle = {
        paddingLeft: 50,
        paddingTop: 10,
        paddingBottom: 50,
        paddingRight: 10,
        dataPaddingLeft: 40,
        dataPaddingBottom: 40,
        dataPaddingTop: 40,
        dataPaddingRight: 40,
        axisTitleLeft: "Cq",
        axisTitleLeftPadding: 20,
        axisTitleBottom: isCN ? "Log(Conc)"
            : "Log Starting Quantity",
        axisTitleBottomPadding: 20,
        drawLegendMode: true
    };
    const dataAnalysisMethods = [DATA_ANALYSIS_METHOD_1, DATA_ANALYSIS_METHOD_2, DATA_ANALYSIS_METHOD_3];
    const sigLevelList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let cloneGroupByLists = [];
    let cloneTableSelectLists = [];
    let cloneTarget = [];
    let cloneTargetSelectedArr = [];
    let cloneAnalysisShowLineArr = [];
    let cloneData = {};
    useEffect(() => {

        console.log(data);
        //  设置表格信息
        let targetMap = new Map(),
            dataTarget = [];
        data.wells.forEach(item => item.targets.forEach(item_ => targetMap.set(item_.name, {
            ...item_,
            opt: targetSelectedArr.includes(item_.name)
        })));
        targetMap.forEach(value => dataTarget.push(value));
        dataTarget.forEach(item => data.targets.find(it => it.uuid === item.uuid && (item.threshold = it.threshold)));
        setTarget(dataTarget);  //  剔除掉同名的target,保存所有不同名字的target的全部信息
        let cycleNum = 0;
        data.protocol.stages.forEach(item => item.state === AMPLIFICATION && (cycleNum += item.cycle));
        setMoreDataTableTitle(Array(cycleNum).fill(null));
        setMoreTableTargetNameList(["All"].concat(data.targets.map(item => item.name)));
        setHeatMapTarget(data.targets.map(item => item.channel));

        //  排序操作,初始化title
        let index = groupByLists.findIndex(item => item.selected);
        cloneAnalysisShowLineArr = getAnalysisInfo(data).analysisShowLineArr;
        tableSelectedLists.forEach((item, index) => {
            cloneAnalysisShowLineArr.forEach(it => it[TABLE_TITLE_KEY[index]].show = item.selected);
        });
        dispatch(saveAnalysisShowLineArr(groupBySort(cloneAnalysisShowLineArr, index)));
        //  设置Data Analysis Method
        let method;
        switch (data.analysisMethodSetting.method) {
            case BASELINE_SUBTRACTED_CURVE_FIT:
                method = DATA_ANALYSIS_METHOD_1;
                break;
            case BASELINE_CORRECTION:
                method = DATA_ANALYSIS_METHOD_2;
                break;
            case RAW_DATA:
                method = DATA_ANALYSIS_METHOD_3;
                break;
            default:
                method = DATA_ANALYSIS_METHOD_2;
        }
        dispatch(saveDataAnalysisMethod(method));
    }, [data]);

    useEffect(() => {
        if (showMoreData) {
            return;
        }
        let targetLine = [],  //  保存target的k,b用来画Standard Curve线
            quantificationCurve,  //  quantification实例
            standardCurve;  //  standard实例
        data.targets.forEach(target => {
            if (!targetSelectedArr.includes(target.name)) {
                return;
            }
            //TODO:
            targetLine.push({
                name: target.name,
                k: target.k,
                b: target.b,
                color: target.color,
                r2: target.r2,
                e: target.e
            });
        });
        if (!showLargeQuantificationPic) {
            quantificationCurve = FluorescenceCanvas.init("quantification", quantificationStyle);
            if (!autoAxes) {
                quantificationCurve.setAutoAxisY(false);
                quantificationCurve.setMaxY(maxY);
                quantificationCurve.setMinY(minY);
            } //  取消autoAxes后重置相应的属性
            if (isStandardCurve) {
                standardCurve = FluorescenceCanvas.init("standardCurve", standardStyle);
                targetLine.forEach(item => {
                    if (isNaN(item.k) || isNaN(item.b) || item.b === -1) {
                        return;
                    }
                    let text = `${item.name} E=${((+item.e) * 100).toFixed(2)}% R^2=${(+item.r2).toFixed(3)} y=${(+item.k).toFixed(2)}x${item.b > 0 ? "+" : null}${(+item.b).toFixed(2)}`;
                    standardCurve.addEntity(FluorescenceEntity.getInstance({
                        type: EntityType.LINE,
                        color: item.color,
                        k: item.k,
                        b: item.b,
                        text: text
                    }));
                });
                let maxSq = [];
                analysisShowLineArr.forEach(item => {
                    if (item.omit.value === "true" || !data.wells[item.id].show || !targetSelectedArr.includes(item.target.value)) {
                        return;
                    }
                    let currentWell = data.wells[item.id],  //  当前的well
                        cqSqIndex = item.channelIndex,  //  cq&sq的索引和channel相同  base0(channel从1到6,对应lines的0-5)
                        currentCq = currentWell.lines[cqSqIndex].cq; //  cq值
                    if (currentCq < 0) {
                        return;
                    }
                    let currentSq = Math.log10(currentWell.lines[cqSqIndex].sq); //  sq值的log值
                    maxSq[maxSq.length] = currentSq;  //  存取所有sq的值
                    switch (currentWell.type) {
                        case WELL_TYPE.STD:
                            standardCurve.addEntity(FluorescenceEntity.getInstance({
                                type: EntityType.CIRCLE,
                                id: item.id,
                                dataList: [currentCq],
                                singleDataX: currentSq,
                                color: isTarget_?item.color:item.sampleColor,
                                highlight: item.id === Number(wellId[0]),
                                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
                            }));
                            break;
                        case WELL_TYPE.UNK:
                            standardCurve.addEntity(FluorescenceEntity.getInstance({
                                type: EntityType.CROSS,
                                id: item.id,
                                dataList: [currentCq],
                                singleDataX: currentSq,
                                color: isTarget_?item.color:item.sampleColor,
                                highlight: item.id === Number(wellId[0]),
                                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
                            }));
                            break;
                    }
                });
              let maxX = Math.max(...maxSq);
              let minX = Math.min(...maxSq);
              let handleEroMin = (!isFinite(minX)||isNaN(minX)) ? 0 : minX;
              let handleEroMax = (!isFinite(maxX)||isNaN(maxX))? 40 : maxX;
              standardCurve.setMaxX(handleEroMax);  //  需要手动设置maxX
              standardCurve.setMinX(handleEroMin);  //  x轴起始坐标
              standardCurve.onMousemove(function () {
                    this && setLineId(this.id);
                });
            } //  standard图例
        } else {
            quantificationCurve = FluorescenceCanvas.init("largeQuantification", quantificationStyle);
        }
        quantificationCurve.setMaxX(pcrAllCycle);
        // console.log(quantificationCurve,data.targets);
        if(isTarget_){
          if (isCq) {
            //绘制target-cq阈值线
            if (data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD) {
              data.targets.forEach(item => {
                if (!targetSelectedArr.includes(item.name)) {
                  return;
                }
                quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                  type: EntityType.THRESHOLD,
                  id: item.name,
                  dataList: [item.threshold],
                  color: item.color,
                  text: item.threshold
                }));
              });
            }
            analysisShowLineArr.forEach(item => {
              if (item.omit.value === "true" || !data.wells[item.id].show || !targetSelectedArr.includes(item.target.value)) {
                return;
              }
              //绘制target-cq扩增线
              quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                id: item.id,
                dataList: data.wells[item.id].lines[item.channelIndex][DATA_ANALYSIS_METHOD[dataAnalysisMethod]],
                color: item.color,
                highlight: item.id === Number(wellId[0]),
                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
              }));
            });
          } else {
            quantificationCurve.setDrawLogAxis(true);
            quantificationCurve.setAutoAxisY(false);
            if (autoAxes) { //  log图自动坐标轴固定设置
              quantificationCurve.setMinY(-2);
              quantificationCurve.setMaxY(2);
            } else {  //  对输入值进行log
              minY > 0 && quantificationCurve.setMinY(Math.log10(minY));
              maxY > 0 && quantificationCurve.setMaxY(Math.log10(maxY));
            }
            if (data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD) {
              data.targets.forEach(item => {
                if (!targetSelectedArr.includes(item.name)) {
                  return;
                }
                let logThreshold = Math.log10(item.threshold);
                if (logThreshold <= -2) {
                  logThreshold = 0.01;
                }
                let logDataList = [logThreshold];
                // TODO: 坐标y轴的值是Math.pow(10,logDataList)
                //绘制target-log阈值线
                quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                  type: EntityType.THRESHOLD,
                  id: item.name,
                  dataList: logDataList,
                  color: item.color,
                  text: item.threshold
                }));
              });
            }
            let maxYLog = 0;
            analysisShowLineArr.forEach(item => {
              if (item.omit.value === "true" || !data.wells[item.id].show || !targetSelectedArr.includes(item.target.value)) {
                return;
              }
              let beforeLogData = data.wells[item.id].lines[item.channelIndex][DATA_ANALYSIS_METHOD[dataAnalysisMethod]];
              let logData = [];
              for (let i = beforeLogData.length - 1; i >= 0; i--) {
                if (beforeLogData[i] <= 0.001) {
                  logData[logData.length] = -3;
                  // if (logData.length > 0) {
                  //   logData[logData.length] = logData[logData.length - 1];
                  // } else {  //  最后一个就是负数
                  //   let cloneBeforeLogData = [...beforeLogData];
                  //   logData[logData.length] = Math.log10(cloneBeforeLogData.reverse().find(item => item > 0));
                  // }
                } else {
                  logData.push(Math.log10(beforeLogData[i]));
                }
              }
              logData.reverse();
              logData = logData.filter(item => item !== -Infinity && !isNaN(item)); //  剔除-Infinite和NaN
              maxYLog = Math.max(maxYLog, ...logData);
              //绘制target-log扩增线
              quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                id: item.id,
                dataList: logData,
                color: item.color,
                highlight: item.id === Number(wellId[0]),
                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
              }));
            });
          } // Cq&Log的图例
        }else {
          if (isCq) {
            if (data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD) {
              data.targets.forEach(item => {
                if (!targetSelectedArr.includes(item.name)) {
                  return;
                }
                //绘制sample-cq阈值线
                quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                  type: EntityType.THRESHOLD,
                  id: item.name,
                  dataList: [item.threshold],
                  color: item.color,
                  text: item.threshold
                }));
              });
            }
            analysisShowLineArr.forEach(item => {
              if (item.omit.value === "true" || !data.wells[item.id].show || !targetSelectedArr.includes(item.target.value)) {
                return;
              }
              //绘制sample-cq扩增线
              quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                id: item.id,
                dataList: data.wells[item.id].lines[item.channelIndex][DATA_ANALYSIS_METHOD[dataAnalysisMethod]],
                color: item.sampleColor,
                highlight: item.id === Number(wellId[0]),
                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
              }));
            });
          } else {
            quantificationCurve.setDrawLogAxis(true);
            quantificationCurve.setAutoAxisY(false);
            if (autoAxes) { //  log图自动坐标轴固定设置
              quantificationCurve.setMinY(-2);
              quantificationCurve.setMaxY(2);
            } else {  //  对输入值进行log
              minY > 0 && quantificationCurve.setMinY(Math.log10(minY));
              maxY > 0 && quantificationCurve.setMaxY(Math.log10(maxY));
            }
            if (data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD) {
              data.targets.forEach(item => {
                if (!targetSelectedArr.includes(item.name)) {
                  return;
                }
                let logThreshold = Math.log10(item.threshold);
                if (logThreshold <= -2) {
                  logThreshold = 0.01;
                }
                let logDataList = [logThreshold];
                // TODO: 坐标y轴的值是Math.pow(10,logDataList)
                //绘制sample-log阈值线
                quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                  type: EntityType.THRESHOLD,
                  id: item.name,
                  dataList: logDataList,
                  color: item.color,
                  text: item.threshold
                }));
              });
            }
            let maxYLog = 0;
            analysisShowLineArr.forEach(item => {
              if (item.omit.value === "true" || !data.wells[item.id].show || !targetSelectedArr.includes(item.target.value)) {
                return;
              }
              let beforeLogData = data.wells[item.id].lines[item.channelIndex][DATA_ANALYSIS_METHOD[dataAnalysisMethod]];
              let logData = [];
              for (let i = beforeLogData.length - 1; i >= 0; i--) {
                if (beforeLogData[i] <= 0.001) {
                  logData[logData.length] = -3;
                  // if (logData.length > 0) {
                  //   logData[logData.length] = logData[logData.length - 1];
                  // } else {  //  最后一个就是负数
                  //   let cloneBeforeLogData = [...beforeLogData];
                  //   logData[logData.length] = Math.log10(cloneBeforeLogData.reverse().find(item => item > 0));
                  // }
                } else {
                  logData.push(Math.log10(beforeLogData[i]));
                }
              }
              logData.reverse();
              logData = logData.filter(item => item !== -Infinity && !isNaN(item)); //  剔除-Infinite和NaN
              maxYLog = Math.max(maxYLog, ...logData);
              //绘制sample-log扩增线
              quantificationCurve.addEntity(FluorescenceEntity.getInstance({
                id: item.id,
                dataList: logData,
                color: item.sampleColor,
                highlight: item.id === Number(wellId[0]),
                text: WELLS_ROW[item.row] + WELLS_COLUMN[item.col]
              }));
            });
          } // Cq&Log的图例
        }
        quantificationCurve.onMousemove(function () {
            // console.log(this);
            this && data.analysisMethodSetting.mode === CUSTOM_THRESHOLD && typeof this.id !== Number && changeThreshold(this);
            this && setLineId(this.id);
        });
        // 设置Export对象
        setTimeout(() => {
            if (!document.getElementById("quantificationImgUrl")) {
                return;
            }
            let cloneExportObj = {};
            cloneExportObj = deepClone(isCN ? exportObjCn : exportObj, cloneExportObj);
            if (isCq) {
                cloneExportObj.analysis.imgAmplificationCurve_cq = document.getElementById("quantificationImgUrl").toDataURL().split(",")[1];
            } else {
                cloneExportObj.analysis.imgAmplificationCurve_log = document.getElementById("quantificationImgUrl").toDataURL().split(",")[1];
            }
            standardCurve && (cloneExportObj.analysis.imgStandardCurve = document.getElementById("standardCurveImgUrl").toDataURL().split(",")[1]);
            isCN ? dispatch(saveExportObjCn(cloneExportObj))
                : dispatch(saveExportObj(cloneExportObj));
        });
        return () => {
            quantificationCurve.destroyCanvas();
            standardCurve && standardCurve.destroyCanvas();
        };
    }, [dataAnalysisMethod, pcrAllCycle, data, analysisShowLineArr, targetSelectedArr, isCq,isTarget, showMoreData, showLargeQuantificationPic, minY, maxY, autoAxes, wellId, isStandardCurve]);

    useEffect(() => { //  点击右下角plate时的联动
      // if(  wellId[0] instanceof String){
      //   return
      // }
      console.log(wellId);
      if (showMoreData) {
            return;
        }
        if (isMessageTableEnter) {
            setIsMessageTableEnter(false);
            return;
        }
        if (data.wells[wellId[0]] && data.wells[wellId[0]].targets.length === 0) {
            return;
        }
        let scrollTop = messageTable.current.scrollTop; //  滚动条滚上去的高度
        let wellHeight = analysisShowLineArr.findIndex(item => item.id === Number(wellId[0])) * 38; //  当前元素相对于整个区域的高度(包括隐藏的部分)
        let clientHeight = messageTable.current.clientHeight; //  表格区域可见高度
        if (wellHeight - scrollTop > clientHeight || wellHeight < scrollTop) {
            messageTable.current.scrollTop = wellHeight;  //  控制messageTable表格跳转到指定well
        }

    }, [wellId]);

    useEffect(() => { //  moreData表格联动
        if (!showMoreData) {
            return;
        }
        if (data.wells[heatMapWellId] && data.wells[heatMapWellId].targets.length === 0) {
            return;
        }
        let scrollTop = moreDataMessageTable.current.scrollTop; //  滚动条滚上去的高度
        let wellHeight = analysisShowLineArr.findIndex(item => item.id === Number(heatMapWellId)) * 38; //  当前元素相对于整个区域的高度(包括隐藏的部分)
        let clientHeight = moreDataMessageTable.current.clientHeight; //  表格区域可见高度
        if (wellHeight - scrollTop > clientHeight || wellHeight < scrollTop) {
            moreDataMessageTable.current.scrollTop = wellHeight;  //  控制messageTable表格跳转到指定well
        }
    }, [heatMapWellId]);

    useEffect(() => {
        dispatch(saveHeatMapInfo({...heatMapInfo, target: data.targets.map(item => item.channel)[0]}));
    }, []);

    useEffect(() => {
      console.log(cutOffSetting);
      console.log(cutOffTarget);
    },[cutOffSetting])
    //  TODO:这里依赖项加上data会导致analysisShowArr中的数据切换算法不更改
    useEffect(() => {
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        tableSelectedLists.forEach((item, index) => {
            cloneAnalysisShowLineArr.forEach(it => it[TABLE_TITLE_KEY[index]].show = item.selected);
        });
        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
    }, [tableSelectedLists]);

    //  拖动线改变Threshold
    const changeThreshold = useDebounce(value => {
        cloneData = deepClone(data, cloneData);
        let shouldRequest;
        if (isCq) {
            shouldRequest = cloneData.targets.some(item => {
                if (value && item.name === value.id && item.threshold !== value.dataList[0]) {
                    item.threshold = value.dataList[0];
                    cloneData.wells.forEach(well => well.targets.forEach(it => it.name === value.id && (it.threshold = value.dataList[0])));
                    return true;
                } //  value是undefined或threshold没有改变时不用发送请求
            });
            shouldRequest = cloneData.plateSetting.targets.some(item => {
                if (value && item.name === value.id && item.threshold !== value.dataList[0]) {
                    item.threshold = value.dataList[0];
                    cloneData.wells.forEach(well => well.targets.forEach(it => it.name === value.id && (it.threshold = value.dataList[0])));
                    return true;
                } //  value是undefined或threshold没有改变时不用发送请求
            });
        } else {
            shouldRequest = cloneData.targets.some(item => {
                if (value && item.name === value.id && Math.log10(item.threshold) !== value.dataList[0]) {
                    item.threshold = Math.pow(10, value.dataList[0]);
                    cloneData.wells.forEach(well => well.targets.forEach(it => it.name === value.id && (it.threshold = value.dataList[0])));
                    return true;
                } //  value是undefined或threshold没有改变时不用发送请求
            });
            shouldRequest = cloneData.plateSetting.targets.some(item => {
                if (value && item.name === value.id && Math.log10(item.threshold) !== value.dataList[0]) {
                    item.threshold = Math.pow(10, value.dataList[0]);
                    cloneData.wells.forEach(well => well.targets.forEach(it => it.name === value.id && (it.threshold = value.dataList[0])));
                    return true;
                } //  value是undefined或threshold没有改变时不用发送请求
            });
        }
        shouldRequest && request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        dispatch(saveAnalysisShowLineArr(getAnalysisInfo(res.data).analysisShowLineArr));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }, 200);

    //  改变一个target的threshold
    function changeSingleTargetThreshold(targetName, value) {
        cloneData = deepClone(data, cloneData);
        cloneData.targets.some(item => item.name === targetName && (item.threshold = Number(value)));
        cloneData.plateSetting.targets.some(item => item.name === targetName && (item.threshold = Number(value)));
        cloneData.wells.forEach(item => item.targets.forEach(it => it.name === targetName && (it.threshold = Number(value))));
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        dispatch(saveAnalysisShowLineArr(getAnalysisInfo(res.data).analysisShowLineArr));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }

    //  改变全部的target的threshold
    function changeAllThreshold(value) {
        cloneData = deepClone(data, cloneData);
        cloneData.targets.forEach(item => (item.threshold = Number(value)));
        cloneData.plateSetting.targets.forEach(item => (item.threshold = Number(value)));
        cloneData.wells.forEach(item => item.targets.forEach(it => it.threshold = Number(value)));
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        dispatch(saveAnalysisShowLineArr(getAnalysisInfo(res.data).analysisShowLineArr));
                        dispatch(saveAllThreshold(Number(value)));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }

    function omMouseDownListener(e) {
        if (e.buttons !== 1) {      //  判断鼠标左键按下
            return;
        }
        e.preventDefault();
        setStartX(e.clientX);
        setStartY(e.clientY);
        setLeftDown(true);
    }

    function omMouseMoveListener(e) {
        if (leftDown) {
            let offsetX = e.clientX - startX;
            let offsetY = e.clientY - startY;
            quantificationBox.current.scrollLeft = quantificationBox.current.scrollLeft - offsetX;
            quantificationBox.current.scrollTop = quantificationBox.current.scrollTop - offsetY;
        }
    }

    //  GroupBy菜单操作
    function chooseGroupBy(indey) {
        cloneGroupByLists = deepClone(groupByLists, cloneGroupByLists);
        cloneGroupByLists.forEach(item => item.selected = false);
        cloneGroupByLists[indey].selected = true;
        dispatch(saveGroupByLists(cloneGroupByLists));
        //  排序
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        if (cloneAnalysisShowLineArr.length === 0) {
            return;
        }
        dispatch(saveAnalysisShowLineArr(groupBySort(cloneAnalysisShowLineArr, indey)));
    }

    //  TableSelect菜单操作
    function chooseTableSelect(indey) {
        cloneTableSelectLists = deepClone(tableSelectedLists, cloneTableSelectLists);
        cloneTableSelectLists[indey].selected = !cloneTableSelectLists[indey].selected;
        setTableTitle(cloneTableSelectLists.filter(item => item.selected));
        dispatch(saveTableSelectedLists(cloneTableSelectLists));
    }

    //  Target Setting点击Opt操作
    function targetSettingSelect(indey) {
        cloneTarget = deepClone(target, cloneTarget);
        cloneTargetSelectedArr = deepClone(targetSelectedArr, cloneTargetSelectedArr);
        cloneTarget[indey].opt = !cloneTarget[indey].opt;
        cloneTargetSelectedArr = cloneTarget.filter(item => item.opt).map(item => item.name);
        setTarget(cloneTarget);
        dispatch(saveTargetSelectedArr(cloneTargetSelectedArr));
    }

    //  选择message的某一条
    function messageSelected(indey) {
        setLineId(indey);
        setIsMessageTableEnter(true);
    }

    //  选择dataAnalysis方法
    function selectDataAnalysisMethod(value) {
        let method = "";
        switch (value) {
            case  DATA_ANALYSIS_METHOD_1:
                method = BASELINE_SUBTRACTED_CURVE_FIT;
                break;
            case DATA_ANALYSIS_METHOD_2:
                method = BASELINE_CORRECTION;
                break;
            case DATA_ANALYSIS_METHOD_3:
                method = RAW_DATA;
                break;
        }
        cloneData = deepClone(data, cloneData);
        cloneData.analysisMethodSetting.method = method;
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                      calCqMean(res.data);  //  重新计算 cqMean
                      calQuantityMean(res.data);  //  重新计算 cqMean
                        dispatch(saveData(res.data));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
        dispatch(saveDataAnalysisMethod(value));
    }

    //  改变table中的数据(Omit,BaselineStart,BaselineEnd)
    function changeTable(value, item_, indey, type) {
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        cloneData.wells.forEach(well => well.selected = false);
        switch (type) {
            case "start":
                cloneAnalysisShowLineArr[indey].baseStartCycle.value = value;
                cloneData.wells[item_.id].lines[item_.channelIndex].baseStartCycle = value;
                request({
                    url: 'analysis/calAll',
                    data: {...cloneData},
                    method: 'post'
                })
                    .then(res => {
                        switch (res.code) {
                            case 200:
                                dispatch(saveData(res.data));
                                break;
                            case 500:
                                message.error(res.message);
                                break;
                            default:
                                message.error("error");
                                // TODO: 排查错误
                                console.log(res);
                        }
                    })
                    .catch(err => message.error(err));
                break;
            case "end":
                cloneAnalysisShowLineArr[indey].baseEndCycle.value = value;
                cloneData.wells[item_.id].lines[item_.channelIndex].baseEndCycle = value;
                request({
                    url: 'analysis/calAll',
                    data: {...cloneData},
                    method: 'post'
                })
                    .then(res => {
                        switch (res.code) {
                            case 200:
                                dispatch(saveData(res.data));
                                break;
                            case 500:
                                message.error(res.message);
                                break;
                            default:
                                message.error("error");
                                // TODO: 排查错误
                                console.log(res);
                        }
                    })
                    .catch(err => message.error(err));
                break;
            case "omit":
                cloneAnalysisShowLineArr[indey].omit.value = String(value);
                cloneData.wells[item_.id].lines[item_.channelIndex].omit = value;
                break;
        }
        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
        if (type === "omit") {
            request({
                url: 'analysis/calAll',
                data: {...cloneData},
                method: 'post'
            })
                .then(res => {
                    switch (res.code) {
                        case 200:
                            calCqMean(res.data);  //  重新计算 cqMean
                            dispatch(saveData(res.data));
                            break;
                        case 500:
                            message.error(res.message);
                            break;
                        default:
                            message.error("error");
                            // TODO: 排查错误
                            console.log(res);
                    }
                })
                .catch(err => message.error(err));
        } else {
            dispatch(saveData(cloneData));
        }
    }

    /*TODO:计算起始终止循环,考虑后台加判断或者前台重写,待做?
    function calStartEndCycle(data) {
      data.wells.forEach(well => {
        for (let i = 0; i < well.lines; i++) {
          let lineData = well.lines[i].quantificationOpt;
          if (lineData.length === 0) {
            continue;
          }
          let gradList = [...lineData];
          let maxIndex = 0, gradMax = 0, max = 0;
          for (let i = gradList.length - 2; i >= 0; i--) {
            if (gradList[i] <= 0) {
              gradList[i] = gradList[i + 1];
            }
          }

          for (let j = 0; j < gradList.length - 2; j++) {
            gradList[i] = (gradList[i] + gradList[i + 1] + gradList[i + 2]) / 3;
          }
          for (let j = 0; j < gradList.length; j++) {
            if (gradList[j] > max) {
              max = gradList[j];
            }
          }
          for (let j = 0; j < gradList.length - 1; j++) {
            gradList[i] = (gradList[i + 1] - gradList[i]) / max;
          }
          gradList[gradList.length - 1] = gradList[gradList.length - 2];

          for (let j = 0; j < gradList.length; j++) {
            if (gradList[i] > gradMax) {
              gradMax = gradList[i];
              maxIndex = j;
            }
          }

          if (maxIndex < 6) {
            gradList[maxIndex] = 0;
            for (let j = 0; j < gradList.length; j++) {
              if (gradList[i] > gradMax) {
                gradMax = gradList[i];
                maxIndex = j;
              }
            }
          }
          if (maxIndex >= 20) {
            well.lines[i].baseStartCycle(maxIndex - 15);
            well.lines[i].baseEndCycle(maxIndex - 6);
          } else if (maxIndex <= 5) {
            well.lines[i].baseStartCycle(1);
            well.lines[i].baseEndCycle(4);
          } else if (maxIndex <= 10) {
            well.lines[i].baseStartCycle(maxIndex - 5);
            well.lines[i].baseEndCycle(maxIndex - 3);
          } else {
            well.lines[i].baseStartCycle(maxIndex - 8); //10-20
            well.lines[i].baseEndCycle(maxIndex - 3);
          }
        }
      });
    }*/

    //  改变Baseline,如果是Auto就自动将所有计算成3-15个循环  备份
    function changeBaseLine(value) {
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        dispatch(saveBaselineType(value));
        dispatch(saveData({
          ...cloneData,
          analysisMethodSetting:{
            ...cloneData.analysisMethodSetting,
            baseLineAuto:value === 'auto'
          }}))
        if (value === "default") {
            return;
        }
        //后台请求计算起始循环数
        request({
            url: 'analysis/calAll',
            data: {...cloneData,
                    analysisMethodSetting:{
                      ...cloneData.analysisMethodSetting,
                       baseLineAuto:value === 'auto'}
                       },
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }

    //0913
    /*function changeBaseLine(value) {
      cloneData = deepClone(data, cloneData);
      cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
      dispatch(saveBaselineType(value));
      if (value === "default") {
        return;
      }
      //后台请求计算起始循环数
      request({
        url: 'analysis/calStartEndCycle',
        data: {...cloneData},
        method: 'post'
      })
        .then(r => {
          switch (r.code) {
            case 200:
              request({
                url: 'analysis/calAll',
                data: {...r.data},
                method: 'post'
              })
                .then(res => {
                  switch (res.code) {
                    case 200:
                      dispatch(saveData(res.data));
                      dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
                      break;
                    case 500:
                      message.error(res.message);
                      break;
                    default:
                      message.error("error");
                      // TODO: 排查错误
                      console.log(res);
                  }
                })
                .catch(err => message.error(err));
              break;
            case 500:
              message.error(r.message);
              break;
            default:
              message.error("error");
              // TODO: 排查错误
              console.log(r);
          }
        })
        .catch(err => message.error(err));
    }*/

    /*  function changeBaseLine(value) {
        dispatch(saveBaselineType(value));
        if (value === "default") {
          return;
        }
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        cloneAnalysisShowLineArr.forEach(item => item.baseStartCycle.value = 3);
        cloneAnalysisShowLineArr.forEach(item => item.baseEndCycle.value = 15);
        cloneData.analysisMethodSetting.startCycle = 3;
        cloneData.analysisMethodSetting.endCycle = 15;
        cloneData.wells.forEach(well => well.lines.forEach(line => {
          line.baseStartCycle = 3;
          line.baseEndCycle = 15;
        }));
        request({
          url: 'analysis/calAll',
          data: {...cloneData},
          method: 'post'
        })
          .then(res => {
            switch (res.code) {
              case 200:
                dispatch(saveData(res.data));
                dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
                break;
              case 500:
                message.error(res.message);
                break;
              default:
                message.error("error");
                // TODO: 排查错误
                console.log(res);
            }
          })
          .catch(err => message.error(err));
      }*/

    /* //  改变Baseline,如果是Auto自动追踪并禁止手动输入
     function changeBaseLine(value) {
     cloneData = deepClone(data, cloneData);
     dispatch(saveBaselineType(value));
     cloneData.analysisMethodSetting.baseLineAuto = value !== "default";
     request({
     url: 'analysis/calStartEndCycle',
     data: {...cloneData},
     method: 'post'
     })
     .then(res => {
     switch (res.code) {
     case 200:
     request({
     url: 'analysis/calAll',
     data: {...res.data},
     method: 'post'
     })
     .then(res_ => {
     switch (res_.code) {
     case 200:
     dispatch(saveData(res_.data));
     break;
     case 500:
     message.error(res_.message);
     break;
     default:
     message.error("error");
     }
     })
     .catch(err => message.error(err))
     break;
     case 500:
     message.error(res.message);
     break;
     default:
     message.error("error");
     // TODO: 排查错误
     console.log(res);
     }
     })
     .catch(err => message.error(err));
     }*/

    //  改变AnalysisMethodSetting中的BaselineSetting
    function changeBaseLineAll(value, type) {
        let cloneBaseline = {...baseLine};
        cloneBaseline[type] = value;
        dispatch(saveBaseLine(cloneBaseline));
    }

    //  设置baseline,需要调用calCaAndSq,手动调试循环数目
    function setBaseLineAll() {

        let startCycle = Number(baseLine.startCycle),
            endCycle = Number(baseLine.endCycle);
        if (startCycle > endCycle) {
            return message.warn("Start cycle can not more than end Cycle.");
        }
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        cloneAnalysisShowLineArr.forEach(item => item.baseStartCycle.value = Number(startCycle));
        cloneAnalysisShowLineArr.forEach(item => item.baseEndCycle.value = Number(endCycle));
        cloneData.analysisMethodSetting.startCycle = Number(startCycle);
        cloneData.analysisMethodSetting.endCycle = Number(endCycle);
        console.log(cloneData);
        cloneData.wells.forEach(well => well.lines.forEach(line => {
            line.baseStartCycle = Number(startCycle);
            line.baseEndCycle = Number(endCycle);
        }));
        cloneData.analysisMethodSetting.baseLineAuto = false;
        console.log(cloneData)
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        // res.data.analysisMethodSetting.baseLineAuto = true;
                        dispatch(saveData(res.data));
                        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }

    //  改变AnalysisMethodSetting中的Mode
    function changeDefaultMethodSettingMode(value) {
        cloneData = deepClone(data, cloneData);
        cloneData.analysisMethodSetting.mode = value;
        if (value === THRESHOLD) {
            dispatch(saveCqSingleThreshold(THRESHOLD));
        } else if (value === CUSTOM_THRESHOLD) {
            dispatch(saveCqSingleThreshold(CUSTOM_THRESHOLD));
        } else if (value === SINGLE_THRESHOLD) {
            cloneData.analysisMethodSetting.mode = cqSingleThreshold;
            setSingleThreshold(true);
        }
        // if ((value === SINGLE_THRESHOLD && cqSingleThreshold === CUSTOM_THRESHOLD) || value === CUSTOM_THRESHOLD) {
        //   cloneData.targets.forEach(item => (item.threshold = Number(allThreshold)));
        //   cloneData.plateSetting.targets.forEach(item => (item.threshold = Number(allThreshold)));
        //   cloneData.wells.forEach(item => item.targets.forEach(it => it.threshold = Number(allThreshold)));
        // }
        if (value === CQMAN || value === REGRESSION || value === EXTREMUM) {
            setSingleThreshold(false);
        }
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                      calCqMean(res.data);  //  重新计算 cqMean
                      calQuantityMean(res.data);  //  重新计算 cqMean
                        dispatch(saveData(res.data));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
    }

    //  选择展示对应的target信息
    function changeMoreDataTableTarget(value) {
        setMoreTableTargetName(value);
    }

    // 选择CutOff的target
    function selectCutOffTarget(targetName) {
        setCutOffTarget(targetName);
    }

    //  Action操作,设置CutOff
    function actionClick() {
        if (!cutOffTarget) {
            return;
        }
        let newCutOff = {left: cutOffSetting.left, right: cutOffSetting.right};
        cloneData = deepClone(data, cloneData);
        if (cutOffTarget === "ALL") {
            cloneData.targets.forEach(item => item.cutOff = newCutOff);
            cloneData.plateSetting.targets.forEach(item => item.cutOff = newCutOff);
            cloneData.wells.forEach(well => well.targets.forEach(item => item.cutOff = newCutOff));
        } else {
            cloneData.targets.find(item => {
                if (item.name === cutOffTarget) {
                    item.cutOff = newCutOff;
                    return true;
                }
            });
            cloneData.plateSetting.targets.find(item => {
                if (item.name === cutOffTarget) {
                    item.cutOff = newCutOff;
                    return true;
                }
            });
            cloneData.wells.forEach(well => well.targets.find(item => {
                if (item.name === cutOffTarget) {
                    item.cutOff = newCutOff;
                    return true;
                }
            }));
        }
        console.log(newCutOff);
        console.log(cutOffSetting);
        console.log(cloneData.targets);
        let cloneTarget=cloneData.targets
        setTarget(cloneTarget);
        dispatch(saveData(cloneData));
        message.info("ok");
    }

    //默认设置版块翻译
    function translate(item) {
        let object={
            "Baseline Subtracted Curve Fit":"曲 线 拟 合",
            "Baseline correction":"基 线 校 正",
            "Raw Data":"原 始 数 据",
            "Well":"反应孔",
            "Omit":"忽略",
            "Flag":"标记",
            "Sample":"样品",
            "Target":"基因",
            "Task":"类型",
            "Dye":"染料",
            "Cq Mean":"Cq平均值",
            "Quantity":"浓度",
            "Quantity Mean":"浓度平均值",
            "Quantity SD":"浓度 SD",
            "Quantity Efficiency":"扩增效率",
            "Comments":"备注",
            "Baseline Start":"基线起点",
            "Baseline End":"基线终点",
            "Sensitivity":"信号强度",
            "SigLevel":"信号强度",
        }
        if(!object[item]){
            return item
        }else {
            return object[item]
        }
    }

    //  选择sigLevel
    function selectSigLevel(origin, indey, value) {
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        cloneAnalysisShowLineArr[indey].sigLevel.value = value;
        cloneData.wells[origin.id].lines[origin.channelIndex].sigLevel = value;
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
    }

    //  选择全部sigLevel
    function selectAllSigLevel(value) {
        setSigLevel(value);
        dispatch(saveSigLevel(value));
        cloneData = deepClone(data, cloneData);
        cloneAnalysisShowLineArr = deepClone(analysisShowLineArr, cloneAnalysisShowLineArr);
        for (let i = 0; i < cloneAnalysisShowLineArr.length; i++) {
            cloneAnalysisShowLineArr[i].sigLevel.value = value;
        }
        for (let i = 0; i < cloneData.wells.length; i++) {
            for (let j = 0; j < 6; j++) {
                cloneData.wells[i].lines[j].sigLevel = value;
            }
        }
        request({
            url: 'analysis/calAll',
            data: {...cloneData},
            method: 'post'
        })
            .then(res => {
                switch (res.code) {
                    case 200:
                        dispatch(saveData(res.data));
                        break;
                    case 500:
                        message.error(res.message);
                        break;
                    default:
                        message.error("error");
                        // TODO: 排查错误
                        console.log(res);
                }
            })
            .catch(err => message.error(err));
        dispatch(saveAnalysisShowLineArr(cloneAnalysisShowLineArr));
    }

    return showMoreData
        ? <div className="analysisQuantification moreData">
            <section className="moreDataTop">
                <div>{isCN ? "定量结果表格" : "Results Scrolling Sheet"}</div>
                <div className="tableStyle scrollBarStyle"
                     style={{overflow: "hidden", border: "2px solid #213040", borderRadius: 15}}>
                    <ul style={{width: 1562}}>
                        <li className="tableMessageWell">{isCN ? "反应孔" : "Well"}</li>
                        <li className="tableMessageOmit">{isCN ? "忽略" : "Omit"}</li>
                        <li className="tableMessageFlag">{isCN ? "标记" : "Flag"}</li>
                        <li className="tableMessageSample">{isCN ? "样品" : "Sample"}</li>
                        <li className="tableMessageTarget">{isCN ? "基因" : "Target"}</li>
                        <li className="tableMessageTask">{isCN ? "类型" : "Task"}</li>
                        <li className="tableMessageDye">{isCN ? "染料" : "Dye"}</li>
                        <li className="tableMessageCq">Cq</li>
                        <li className="tableMessageCqMean">{isCN ? "Cq平均值" : "Cq Mean"}</li>
                        <li className="tableMessageCqSD">Cq SD</li>
                        <li className="tableMessageQuantity">{isCN ? "浓度" : "Quantity"}</li>
                        <li className="tableMessageQuantityMean">{isCN ? "浓度平均值" : "Quantity Mean"}</li>
                        <li className="tableMessageQuantitySD">{isCN ? "浓度 SD" : "Quantity SD"}</li>
                        <li className="tableMessageQuantityEfficiency">{isCN ? "扩增效率" : "Quantity Efficiency"}</li>
                        <li className="tableMessageR">R<sup>2</sup></li>
                        <li className="tableMessageComments">{isCN ? "备注" : "Comments"}</li>
                    </ul>
                    <section className="scrollBarStyle"
                             style={{height: 240}}
                             ref={moreDataMessageTable}
                    >
                        {
                            analysisShowLineArr.map(item => (
                                <ul key={item.id + item.target.value}
                                    style={{backgroundColor: item.id === heatMapWellId ? "#ccc" : null}}
                                >
                                    <li className="tableMessageWell">{item.well.value}</li>
                                    <li className="tableMessageOmit">
                                        <input type="checkbox" checked={JSON.parse(item.omit.value)} readOnly={true}/>
                                    </li>
                                    <li className="tableMessageFlag">{item.flag.value}</li>
                                    <li className="tableMessageSample">{item.sample.value}</li>
                                    <li className="tableMessageTarget">{item.target.value}</li>
                                    <li className="tableMessageTask">{item.task.value}</li>
                                    <li className="tableMessageDye">{item.dye.value}</li>
                                    <li className="tableMessageCq">{item.omit.value !== "false" ? item.cq.omitValue : item.cq.value}</li>
                                    <li
                                        className="tableMessageCqMean">{item.omit.value !== "false" ? item.cqMean.omitValue : item.cqMean.value}</li>
                                    <li
                                        className="tableMessageCqSD">{item.omit.value !== "false" ? item.cqSd.omitValue : item.cqSd.value}</li>
                                    <li
                                        className="tableMessageQuantity">{item.omit.value !== "false" ? item.quantity.omitValue : Number(item.quantity.value).toPrecision(3)}</li>
                                    <li
                                        className="tableMessageQuantityMean">{item.omit.value !== "false" ? item.quantityMean.omitValue : item.quantityMean.value}</li>
                                    <li
                                        className="tableMessageQuantitySD">{item.omit.value !== "false" ? item.quantitySd.omitValue : item.quantitySd.value}</li>
                                    <li
                                        className="tableMessageQuantityEfficiency">
                                        {item.omit.value !== "false" ? item.quantityEfficiency.omitValue : item.quantityEfficiency.value}
                                    </li>
                                    <li className="tableMessageR">{item.omit.value !== "false" ? item.r.omitValue : item.r.value}</li>
                                    <li className="tableMessageComments">{item.comments.value}</li>
                                </ul>
                            ))
                        }
                    </section>
                </div>
            </section>
            <section className="moreDataBottom">
                <div>
                    <div className="moreDataBottomTitle">
                        <Dropdown
                            overlay={
                                <Menu>
                                    {
                                        heatMapTarget.map((item) => (
                                            <Menu.Item key={item}>
                                                <div style={{...MENU_STYLE, width: 120}}
                                                     onClick={() => dispatch(saveHeatMapInfo({
                                                         ...heatMapInfo,
                                                         target: item
                                                     }))}
                                                >{item}</div>
                                            </Menu.Item>
                                        ))
                                    }
                                </Menu>
                            }
                            placement="bottomCenter"
                            trigger={['click']}
                        >
                            <div>{heatMapInfo.target}</div>
                        </Dropdown>
                        <div>{isCN ? "热图" : "HeatMap"}</div>
                        <Dropdown
                            overlay={
                                <Menu>
                                    <Menu.Item>
                                        <div style={{...MENU_STYLE, width: 120}}
                                             onClick={() => dispatch(saveHeatMapInfo({
                                                 ...heatMapInfo,
                                                 type: HEAT_MAP_TYPE_CQ
                                             }))}
                                        >{HEAT_MAP_TYPE_CQ}
                                        </div>
                                    </Menu.Item>
                                    <Menu.Item>
                                        <div style={{...MENU_STYLE, width: 120}}
                                             onClick={() => dispatch(saveHeatMapInfo({
                                                 ...heatMapInfo,
                                                 type: HEAT_MAP_TYPE_QUANTITY
                                             }))}
                                        >{HEAT_MAP_TYPE_QUANTITY}
                                        </div>
                                    </Menu.Item>
                                </Menu>
                            }
                            placement="bottomCenter"
                            trigger={['click']}
                        >
                            <div>{heatMapInfo.type}</div>
                        </Dropdown>
                    </div>
                    <HeatMapTable
                        setHeatMapWellId={setHeatMapWellId}
                    />
                </div>
                <div className="moreDataBottomRight">
                    <div>{isCN ? "相对荧光强度" : "RFU Spreadsheet"}</div>
                    <div className="moreDataTable">
                        <div className="scrollBarStyle">
                            <ul style={{zIndex: 999}}>
                                <li className="quantificationMoreDataTableLi">
                                    <div>{isCN ? "循环数" : "Cycle"}</div>
                                    <div>{isCN ? "反应孔" : "Well"}</div>
                                </li>
                                <li>{isCN ? "基因" : "Target"}</li>
                                {
                                    moreDataTableTitle.map((item, index) => (
                                        <li key={index}>{index + 1}</li>
                                    ))
                                }
                            </ul>
                            {
                                analysisShowLineArr.map((line, lineIndex) => (
                                    line.target.value === moreTableTargetName || moreTableTargetName === "All"
                                        ? <ul key={line.target.value + lineIndex}>
                                            <li>{line.well.value}</li>
                                            <li>{line.target.value}</li>
                                            {
                                                data.wells[line.id].lines[line.channelIndex][DATA_ANALYSIS_METHOD[dataAnalysisMethod]].map((item, index) => (
                                                    <li key={line.target.value + item + index}>
                                                        {(Number(item) * 1000).toFixed(3)}
                                                    </li>
                                                ))
                                            }
                                        </ul>
                                        : null
                                ))
                            }
                        </div>
                        <div>
                            <div>{isCN ? "基因名称" : "Target Name"}</div>
                            <Dropdown
                                overlay={
                                    <Menu>
                                        {
                                            moreTableTargetNameList.map((item) => (
                                                <Menu.Item key={item}>
                                                    <div style={{...MENU_STYLE, width: 150}}
                                                         onClick={() => changeMoreDataTableTarget(item)}
                                                    >{item}</div>
                                                </Menu.Item>
                                            ))
                                        }
                                    </Menu>
                                }
                                placement="bottomCenter"
                                trigger={['click']}
                            >
                                <div style={{cursor: "pointer"}}>{moreTableTargetName}</div>
                            </Dropdown>
                        </div>
                    </div>
                </div>
                <div onClick={() => setShowMoreData(false)}>{isCN ? "返回上一页" : "Previous"}</div>
            </section>
        </div>
        : showLargeQuantificationPic
            ? <div className="largeQuantificationBox"
                   onDoubleClick={() => setShowLargeQuantificationPic(false)}
                   id="largeQuantification"
            />
            : <div className="analysisQuantification">
                <section className="analysisQuantificationTop">
                    <div className="analysisQuantificationTopLeft">
                        <div>
                            <ul>
                                <li style={isTarget_ ? {backgroundColor: "#213040", color: "#fff"} : null}
                                    onClick={() => {
                                      setIsTarget(true);
                                      dispatch(saveIsTarget(true))
                                    }}
                                >Target
                                </li>
                                <li style={!isTarget_ ? {backgroundColor: "#213040", color: "#fff"} : null}
                                    onClick={() => {
                                      setIsTarget(false);
                                      dispatch(saveIsTarget(false))
                                    }}
                                >Sample
                                </li>
                            </ul>
                            <div>{isCN ? "定量分析" : "Quantification"}</div>
                            <ul>
                                <li style={isCq ? {backgroundColor: "#213040", color: "#fff"} : null}
                                    onClick={() => setIsCq(true)}
                                >Cq
                                </li>
                                <li style={!isCq ? {backgroundColor: "#213040", color: "#fff"} : null}
                                    onClick={() => setIsCq(false)}
                                >Log
                                </li>
                            </ul>
                        </div>
                        {
                            isCq
                                ? <div ref={quantificationBox}
                                       style={{overflow: "auto"}}
                                       className="scrollBarStyle quantificationCanvasBox"
                                       onMouseDown={omMouseDownListener}
                                       onMouseMove={omMouseMoveListener}
                                       onMouseUp={() => setLeftDown(false)}
                                >
                                    {/*{quantificationCqNoView ? <div className="picMention">No View</div> : null}*/}
                                    <section id="quantification"/>
                                </div>
                                : <div ref={quantificationBox}
                                       style={{overflow: "auto"}}
                                       className="scrollBarStyle quantificationCanvasBox"
                                       onMouseDown={omMouseDownListener}
                                       onMouseMove={omMouseMoveListener}
                                       onMouseUp={() => setLeftDown(false)}
                                >
                                    {/*{quantificationCqNoView ? <div className="picMention">No View</div> : null}*/}
                                    <section id="quantification"/>
                                </div>
                        }
                        <div>
                            <div onClick={() => setAutoAxes(!autoAxes)}
                                 className={autoAxes ? "selectedStyle" : null}/>
                            {
                                autoAxes
                                    ? <div style={{width: 100}}>{isCN ? "自动Y轴" : "Auto Axes"}</div>
                                    : <div style={{fontSize: isCN ? '15px' : "16px"}}>
                                        <label htmlFor="Min" style={{marginLeft: 10}}> {isCN ? "最小值" : "Min"}
                                            <input id="Min" type="number"
                                                   value={minY}
                                                   onChange={e => setMinY(e.target.value)}
                                            />
                                        </label>
                                        <label htmlFor="Max"> {isCN ? "最大值" : "Max"}
                                            <input id="Max" type="number"
                                                   value={maxY}
                                                   onChange={e => setMaxY(e.target.value)}
                                            />
                                        </label>
                                    </div>
                            }
                        </div>
                        <div className="quantificationLargeBtn"
                             onClick={() => setShowLargeQuantificationPic(true)}
                        />
                    </div>
                    {
                        isStandardCurve ?
                            <div className="analysisQuantificationTopRight">
                                <div>
                                    <div>{isCN ? "标准曲线" : "Standard Curve"}</div>
                                    <div style={{backgroundImage: `url(${resultPic})`}}
                                         onClick={() => setIsStandardCurve(false)}/>
                                </div>
                                <div style={{position: "relative", overflow: "auto"}}
                                     className="scrollBarStyle standardCanvasBox"
                                >
                                    {/*{standardNoView ? <div className="picMention">No View</div> : null}*/}
                                    <section id="standardCurve"/>
                                </div>
                            </div>
                            : <div className="analysisQuantificationTopRight resultCall">
                                <div>
                                    <div>{isCN ? "定性结果" : "Result Call"}</div>
                                    <div style={{backgroundImage: `url(${standardPic})`}}
                                         onClick={() => setIsStandardCurve(true)}/>
                                </div>
                                <ResultCallTable plateClass="runPagePlateTableMid"/>
                                <div>
                                    <div style={{cursor: "pointer"}} onClick={() => setShowCutOffTable(true)}/>
                                    <div>
                                        <div style={{cursor: "pointer"}}
                                             onClick={actionClick}
                                        >{isCN ? "应用" : "Action"}
                                        </div>
                                        <div>{isCN ? "界限值设置" : "Cut-Off Setting"}</div>
                                    </div>
                                    <div>
                                        <div>{isCN ? "选择基因" : "Target Select"}</div>
                                        <Dropdown
                                            overlay={
                                                <Menu>
                                                    <Menu.Item>
                                                        <div style={{...MENU_STYLE, width: "140px"}}
                                                             onClick={() => selectCutOffTarget("ALL")}
                                                        >ALL
                                                        </div>
                                                    </Menu.Item>
                                                    {
                                                        target.map(item => (
                                                            <Menu.Item key={item.name}>
                                                                <div style={{...MENU_STYLE, width: "140px"}}
                                                                     onClick={() => selectCutOffTarget(item.name)}
                                                                >{item.name}</div>
                                                            </Menu.Item>
                                                        ))
                                                    }
                                                </Menu>
                                            }
                                            overlayClassName="antdDropDownStyle"
                                            placement="bottomCenter"
                                            trigger={['click']}
                                        >
                                            <div style={{cursor: "pointer"}}>{cutOffTarget}</div>
                                        </Dropdown>
                                    </div>
                                    <div>
                                        <div>{isCN ? "界限值" : "Cut-Off"}</div>
                                        <CutOff setCutoffSetting={setCutOffSetting} cutOffFlag={false}/>
                                    </div>
                                    {
                                        showCutOffTable
                                            ? <div className="cutOffTable asideBoxHeader">
                                                <header>
                                                    <div>
                                                        <p>Cut-Off Table</p>
                                                        <p onClick={() => setShowCutOffTable(false)}/>
                                                    </div>
                                                    <hr/>
                                                </header>
                                                <ul className="scrollBarStyle">
                                                    {
                                                        target.map(item => (
                                                            <li key={item.uuid}>
                                                                <div>{item.name}</div>
                                                              <CutOff
                                                                cutOffValue={
                                                                  {
                                                                    left: /*(item.cutOff.left > 50 || item.cutOff.right > 50) ? 15 :*/ item.cutOff.left / 2,
                                                                    right: /*(item.cutOff.left > 50 || item.cutOff.right > 50) ? 35 : */item.cutOff.right / 2
                                                                  }
                                                                }
                                                                cutOffFlag={true} forbidden={true}/>
                                                            </li>
                                                        ))
                                                    }
                                                </ul>
                                            </div>
                                            : null
                                    }
                                </div>
                            </div>
                    }
                </section>
                <section className="analysisQuantificationBottom">
                    <PlateTable plateClass="runPagePlateTableSmall"
                                lineId={lineId}
                                setWellId={setWellId}
                    />
                    <div>
                        <div className="analysisQuantificationTargetSetting">
                            <Title name={isCN ? "目标基因设置" : "Target Setting"}/>
                            <ul>
                                <li>{isCN ? "选择" : "Opt"}</li>
                                <li>{isCN ? "基因" : "Target"}</li>
                                <li>{isCN ? "颜色" : "Color"}</li>
                                <li>{isCN ? "通道" : "Channel"}</li>
                                <li>{isCN ? "阈值" : "Threshold"}</li>
                            </ul>
                            <section className="scrollBarStyle">
                                {
                                    target.map((item, index) => (
                                        <ul key={item.name + item.threshold}>
                                            <li onClick={() => targetSettingSelect(index)}
                                                className={item.opt ? "selectedStyle" : ""}
                                                style={{cursor: "pointer"}}
                                            />
                                            <li>{item.name}</li>
                                            <li>
                                                <div style={{backgroundColor: `${item.color}`}}/>
                                            </li>
                                            <li>{item.channel}</li>
                                            <input key={item.threshold}
                                                   readOnly={data.analysisMethodSetting.mode !== CUSTOM_THRESHOLD}
                                                   defaultValue={isNaN(Number(item.threshold)) ? -1 : Number(item.threshold).toFixed(3)}
                                                   onBlur={e => changeSingleTargetThreshold(item.name, e.target.value)}
                                            />
                                        </ul>
                                    ))
                                }
                            </section>
                        </div>
                        <div onClick={() => setShowMethodSetting(true)}>{isCN ? "默认设置" : "Default Method Setting"}</div>
                        <div className="sigLevel">
                            <div>{isCN ? "信号强度:" : "Sensitivity:"}</div>
                            <Dropdown
                                overlay={
                                    <Menu>
                                        {
                                            sigLevelList.map(item => (
                                                <Menu.Item key={item}>
                                                    <div style={{...MENU_STYLE, width: 50}}
                                                         onClick={() => selectAllSigLevel(item)}
                                                    >{item}</div>
                                                </Menu.Item>
                                            ))
                                        }
                                    </Menu>
                                }
                                overlayClassName="antdDropDownStyle"
                                placement="bottomCenter"
                                trigger={['click']}
                            >
                                <div style={{cursor: "pointer"}}>{sigLevel}</div>
                            </Dropdown>
                        </div>
                        {
                            showMethodSetting
                                ? <div className="methodSetting asideBoxHeader" style={{zIndex: 1}}>
                                    <header>
                                        <div>
                                            <p>{isCN ? "分析参数设置" : "Analysis Method Setting"}</p>
                                            <p onClick={() => setShowMethodSetting(false)}/>
                                        </div>
                                        <hr/>
                                    </header>
                                    <ul>
                                        <li>
                                            <div>{isCN ? "扩增曲线算法" : "Data Analysis Method"}</div>
                                            <Dropdown
                                                overlay={
                                                    <Menu>
                                                        {
                                                            dataAnalysisMethods.map(item => (
                                                                <Menu.Item key={item}>
                                                                    <div style={{...MENU_STYLE, width: 510}}
                                                                         onClick={() => selectDataAnalysisMethod(item)}
                                                                    >{isCN ? translate(item) : item}</div>
                                                                </Menu.Item>
                                                            ))
                                                        }
                                                    </Menu>
                                                }
                                                overlayClassName="antdDropDownStyle"
                                                placement="bottomCenter"
                                                trigger={['click']}
                                            >
                                                <div
                                                    style={{cursor: "pointer"}}>{isCN ? translate(dataAnalysisMethod) : dataAnalysisMethod}</div>
                                            </Dropdown>
                                        </li>
                                        <li>
                                            <div>{isCN ? "Cq值算法" : "Cq Determination Mode"}</div>
                                            <div>
                                                <label htmlFor="SingleThreshold">
                                                    <input type="radio" value={SINGLE_THRESHOLD} name="CqMode"
                                                           id="SingleThreshold"
                                                           defaultChecked={data.analysisMethodSetting.mode === THRESHOLD || data.analysisMethodSetting.mode === CUSTOM_THRESHOLD}
                                                           onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                    /> {isCN ? "单一阈值法" : "Single Threshold"}
                                                </label>
                                                <label htmlFor="CqMan">
                                                    <input type="radio" value={CQMAN} name="CqMode" id="CqMan"
                                                           defaultChecked={data.analysisMethodSetting.mode === CQMAN}
                                                           onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                    /> {isCN ? "CqMan法" : "CqMan"}
                                                </label>
                                                <label htmlFor="Regression">
                                                    <input type="radio" value={REGRESSION} name="CqMode" id="Regression"
                                                           defaultChecked={data.analysisMethodSetting.mode === REGRESSION}
                                                           onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                    /> {isCN ? "回归法" : "Regression"}
                                                </label>
                                                <label htmlFor="Extremum">
                                                    <input type="radio" value={EXTREMUM} name="CqMode" id="Extremum"
                                                           defaultChecked={data.analysisMethodSetting.mode === EXTREMUM}
                                                           onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                    /> {isCN ? "极值法" : "Extremum"}
                                                </label>
                                            </div>
                                        </li>
                                        {
                                            singleThreshold
                                                ? <li>
                                                    <div>{isCN ? "阈值设置" : "Cq Single Threshold"}</div>
                                                    <div>
                                                        <label htmlFor="CqThresholdAuto">
                                                            <input type="radio" value={THRESHOLD} name="Single"
                                                                   id="CqThresholdAuto"
                                                                   checked={data.analysisMethodSetting.mode === THRESHOLD}
                                                                   onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                            /> {isCN ? "自动" : "Auto"}
                                                        </label>
                                                        <label htmlFor="CqThresholdDefault">
                                                            <input type="radio" value={CUSTOM_THRESHOLD} name="Single"
                                                                   id="CqThresholdDefault"
                                                                   checked={data.analysisMethodSetting.mode === CUSTOM_THRESHOLD}
                                                                   onChange={e => changeDefaultMethodSettingMode(e.target.value)}
                                                            /> {isCN ? "手动" : "Set Default"}
                                                        </label>
                                                        <label htmlFor="CqThreshold">
                                                            {isCN ? "阈值" : "Threshold"} <input type="number" id="CqThreshold"
                                                                                               readOnly={data.analysisMethodSetting.mode !== CUSTOM_THRESHOLD}
                                                                                               defaultValue={allThreshold}
                                                                                               onBlur={e => changeAllThreshold(e.target.value)}
                                                        />
                                                        </label>
                                                    </div>
                                                </li>
                                                : null
                                        }
                                        {
                                            singleThreshold
                                                ? <li>
                                                    <div>{isCN ? "基线设置" : "Baseline Setting"}</div>
                                                    <div>
                                                        <label htmlFor="BaselineSettingAuto">
                                                            <input type="radio" name="BaseLineSetting" id="BaselineSettingAuto"
                                                                   value={"auto"}
                                                                   defaultChecked={baselineType === "auto"}
                                                                   onChange={e => changeBaseLine(e.target.value)}
                                                            /> {isCN ? "自动" : "Auto"}
                                                        </label>
                                                        <label htmlFor="BaselineSettingDefault">
                                                            <input type="radio" name="BaseLineSetting"
                                                                   id="BaselineSettingDefault"
                                                                   value={"default"}
                                                                   defaultChecked={baselineType === "default"}
                                                                   onChange={e => changeBaseLine(e.target.value)}
                                                            /> {isCN ? "手动" : "Set Default"}
                                                        </label>
                                                        <span>
                        <input type="number"
                               value={baseLine.startCycle}
                               readOnly={baselineType === "auto"}
                               onChange={e => changeBaseLineAll(e.target.value, "startCycle")}
                        />
                      </span>
                                                        <span>to</span>
                                                        <span>
                        <input type="number"
                               value={baseLine.endCycle}
                               readOnly={baselineType === "auto"}
                               onChange={e => changeBaseLineAll(e.target.value, "endCycle")}
                        />
                      </span>
                                                        <span className="baselineSettingOk"
                                                              onClick={setBaseLineAll}>{isCN ? "确定" : "OK"}</span>
                                                    </div>
                                                </li>
                                                : null
                                        }
                                    </ul>
                                </div>
                                : null
                        }
                    </div>
                    <div style={{position: "relative"}}>
                        <div ref={messageTable} id="tableId" className=" stableWell tableStyle scrollBarStyle"
                             style={{overflow: "auto"}}>
                            <ul style={{zIndex: 10}}>
                                {
                                    tableTitle.map(item => (
                                        <li key={isCN ? translate(item.name) : item.name}
                                            className={`tableMessage${item.styleName}`}>{isCN ? translate(item.name) : item.name}</li>
                                    ))
                                }
                            </ul>
                            {
                                analysisShowLineArr.map((item, index) => (
                                    targetSelectedArr.includes(item.target.value) && data.wells[item.id].show
                                        ? <ul key={item.id + item.target.value}
                                              onMouseEnter={() => messageSelected(item.id)}
                                        >
                                            {item.well.show && <li className="tableMessageWell">{item.well.value}</li>}
                                            {item.omit.show && <li className="tableMessageOmit">
                                                <input type="checkbox" checked={JSON.parse(item.omit.value)}
                                                       onChange={e => changeTable(e.target.checked, item, index, "omit")}
                                                />
                                            </li>}
                                            {item.sigLevel.show && <li className="tableMessageSigLevel">
                                                <Dropdown
                                                    overlay={
                                                        <Menu>
                                                            {
                                                                sigLevelList.map(it => (
                                                                    <Menu.Item key={it}>
                                                                        <div style={{...MENU_STYLE, width: "50px"}}
                                                                             onClick={() => selectSigLevel(item, index, it)}
                                                                        >{it}</div>
                                                                    </Menu.Item>
                                                                ))
                                                            }
                                                        </Menu>
                                                    }
                                                    overlayClassName="antdDropDownStyle"
                                                    placement="bottomCenter"
                                                    trigger={['click']}
                                                >
                                                    <div key={item.sigLevel.value}>{item.sigLevel.value}</div>
                                                </Dropdown>
                                            </li>}
                                            {item.flag.show && <li className="tableMessageFlag">{item.flag.value}</li>}
                                            {item.sample.show &&
                                                <li className="tableMessageSample">{item.sample.value}</li>}
                                            {item.target.show &&
                                                <li className="tableMessageTarget">{item.target.value}</li>}
                                            {item.task.show && <li className="tableMessageTask">{item.task.value}</li>}
                                            {item.dye.show && <li className="tableMessageDye">{item.dye.value}</li>}
                                            {item.cq.show && <li
                                                className="tableMessageCq">{item.omit.value !== "false" ? item.cq.omitValue : item.cq.value}</li>}
                                            {item.cqMean.show && <li
                                                className="tableMessageCqMean">{item.omit.value !== "false" ? item.cqMean.omitValue : item.cqMean.value}</li>}
                                            {item.cqSd.show && <li
                                                className="tableMessageCqSD">{item.omit.value !== "false" ? item.cqSd.omitValue : item.cqSd.value}</li>}
                                            {item.quantity.show && <li
                                                className="tableMessageQuantity">{item.omit.value !== "false" ? item.quantity.omitValue : Number(item.quantity.value).toPrecision(3)}</li>}
                                            {item.quantityMean.show && <li
                                                className="tableMessageQuantityMean">{item.omit.value !== "false" ? item.quantityMean.omitValue : item.quantityMean.value}</li>}
                                            {item.quantitySd.show && <li
                                                className="tableMessageQuantitySD">{item.omit.value !== "false" ? item.quantitySd.omitValue : item.quantitySd.value}</li>}
                                            {item.quantityEfficiency.show &&
                                                <li
                                                    className="tableMessageQuantityEfficiency">{item.omit.value !== "false" ? item.quantityEfficiency.omitValue : item.quantityEfficiency.value}</li>}
                                            {item.r.show && <li
                                                className="tableMessageR">{item.omit.value !== "false" ? item.r.omitValue : item.r.value}</li>}
                                            {item.comments.show &&
                                                <li className="tableMessageComments">{item.comments.value}</li>}
                                            <li className="tableMessageBaseline">
                                                <input type="number"
                                                       readOnly={baselineType === "auto"}
                                                       key={item.baseStartCycle.value}
                                                       defaultValue={item.baseStartCycle.value}
                                                       onBlur={e => {
                                                           if (baselineType === "auto") {
                                                               return;
                                                           }
                                                           e.target.value = Math.max(1, e.target.value);
                                                           e.target.value > item.baseEndCycle.value && (e.target.value = item.baseEndCycle.value);
                                                           changeTable(Number(e.target.value), item, index, "start");
                                                       }}
                                                />
                                            </li>
                                            <li className="tableMessageBaseline">
                                                <input type="number"
                                                       readOnly={baselineType === "auto"}
                                                       key={item.baseEndCycle.value}
                                                       defaultValue={item.baseEndCycle.value}
                                                       onBlur={e => {
                                                           if (baselineType === "auto") {
                                                               return;
                                                           }
                                                           e.target.value = Math.max(1, e.target.value);
                                                           e.target.value < item.baseStartCycle.value && (e.target.value = item.baseStartCycle.value);
                                                           changeTable(Number(e.target.value), item, index, "end");
                                                       }}
                                                />
                                            </li>
                                        </ul>
                                        : null
                                ))
                            }
                        </div>
                        <ul>
                            <li onClick={() => setShowGroupBy(true)}>{isCN ? "群组排序" : "Group By"}</li>
                            <li onClick={() => setShowTableSelect(true)}>{isCN ? "表格筛选" : "Table Select"}</li>
                            <li onClick={() => setShowMoreData(true)}>{isCN ? "更多数据" : "More Data"}</li>
                        </ul>
                        {
                            showGroupBy
                                ? <div className="groupBy asideBoxHeader">
                                    <header>
                                        <div>
                                            <p>{isCN ? "群组" : "Group"}</p>
                                            <p onClick={() => setShowGroupBy(false)}/>
                                        </div>
                                        <hr/>
                                    </header>
                                    <ul>
                                        {
                                            groupByLists.map((item, index) => (
                                                <li key={item.name}>
                                                    <div className={item.selected ? "selectedStyle" : ""}
                                                         onClick={() => chooseGroupBy(index)}
                                                    />
                                                    <div>{item.name}</div>
                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                                : null
                        }
                        {
                            showTableSelect
                                ? <div className="tableSelect asideBoxHeader">
                                    <header>
                                        <div>
                                            <p>Short Table</p>
                                            <p onClick={() => setShowTableSelect(false)}/>
                                        </div>
                                        <hr/>
                                    </header>
                                    <ul className="scrollBarStyle">
                                        {
                                            tableSelectedLists.map((item, index) => (
                                                <li key={item.name} style={{display: item.display}}>
                                                    <div className={item.selected ? "selectedStyle" : ""}
                                                         onClick={() => chooseTableSelect(index)}
                                                    />
                                                    <div>{item.name}</div>
                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                                : null
                        }
                    </div>
                </section>
            </div>;
});
